<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>get JSON object</title>
        <script type="text/javascript" src="jquery/jquery.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $(".button").click(function(){
                  $("form").submit();
            });  // end $(".button").click(function()
            $( "form" ).submit(function( event ) {
                  event.preventDefault();
                  name = $("#inputname").val();
                  age = $("#inputage").val();
                  var posting = $.post(
                                // you need to replace localhost with the server where the application is running on
                                "/bin/parsejsonobject",
                                {
                                  "name" : name,
                                  "age" : age
                                });
                  posting.done(function( data,status ) {
                      $( "#data" ).empty().append( data );
                      $( "#status" ).empty().append( status );
                      var result=JSON.parse(data);       
                      $("#name").empty().append(result.name);
                      $("#age").empty().append(result.age);
                  });  // end posting.done(function( data,status )
            });  // end $( "form" ).submit(function( event )
        });  // end $(document).ready(function(){
</script>
</head>
<body>
<pre><h1>POST en RECEIVE data with JSON</h1><form action="" method="post">
<cite>You can fill in what you like, no client-side check is made on your input</cite>
<span style="font-weight:bold;">Your name </span><input id="inputname" type="text" name="name" value=""/>
<span style="font-weight:bold;">Your age  </span><input id="inputage" type="text" name="age" value=""/>
<span><h3>You've entered</h3></span>
name   : <span style="font-style: italic;" id="name"></span>
age    : <span style="font-style: italic;" id="age"></span>
<button id="post" class="button" type="submit">Get the object</button>
data   : <span style="color: blue;" id="data"></span>
status : <span style="color: green;" id="status"></span>
</form></pre>
</body>    
</html>
